<template>
	<!-- 导航栏 -->
	<navbar :isLocation="isLocation"></navbar>

	<view class="padding-com text-df" style="padding-top: 10rpx;">
		<!-- 背景图 -->
		<image src="@/static/image/index/bg.jpg" style="width: 100%; height: 240rpx;border-radius: 4rpx;" mode="aspectFill" class="">
		</image>

		<!-- 工具栏 -->
		<view class="margin-top-xs">
			<uni-grid :column="4" :showBorder="false" :square="false" :highlight="false" @change="serveChange">
				<uni-grid-item 
				v-for="(item,index) in navList" 
				:key="index" 
				:index="index"
				class="padding-tb-xs" 
				style="text-align: center; vertical-align: middle;">
					<image :src="item.icon"
						class="margin-auto" style="width: 80rpx; height: 80rpx;"></image>
					<view class="margin-top-xs text-sm ">{{item.name}}</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<!-- 活动预告 -->
		<TitleNav title="活动预告" @more="getActiveMore" />
		<ActiveItem v-for="(item,index) in active.yg_list" :key="index" :options="item" />

		<!-- 活动风采 -->
		<TitleNav title="活动风采" @more="goMessage" />
		<view class="l-f l-row-sb l-mg-top20">
			<!-- 活动展示模块开始 -->
			<view v-for="(item,index) in writer.slice(0,2)" :key="index" style="width: 48%;">
				<NewsItem :options="item" />
			</view>
		</view>
		<!-- <view class="flex-row-bt" style="width: 100%;">
      <view v-for="(item,index) in active.fc_list" :key="index" class=" border-radius-shadow padding-bottom-xs"
        style="width: 48%;">
        <view style="display: flex; flex-wrap: wrap;" class="">
          <image :src="item.img[0]" style="width: 50%; height: 80rpx; border-radius: 15rpx 0 0 0;"
            mode="aspectFill" class=""></image>
          <image :src="item.img[1]" style="width: 50%; height: 80rpx; border-radius: 0 15rpx 0 0;"
            mode="aspectFill" class=""></image>
          <image :src="item.img[2]" style="width: 50%; height: 80rpx;" mode="aspectFill" class=""></image>
          <image :src="item.img[3]" style="width: 50%; height: 80rpx;" mode="aspectFill" class=""></image>
        </view>
        <view class="margin-top-xs padding-lr-xs">
          <view>{{item.title}}</view>
          <view class="flex-row-bt margin-top-xs">
            <view class="flex-row text-sm text-low">
              <view class="iconfont icon-rili  " style="font-size: 30rpx; margin-right: 5rpx;"></view>
              <view>{{item.time}}</view>
            </view>
            <uni-icons type="star" size="20" color="#8E8E8E"></uni-icons>
          </view>
        </view>
      </view>
    </view> -->

		<!-- 义购之家 -->
		<TitleNav title="义购之家" @more="goShop" />
		<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false">
			<uni-grid-item :index="0" v-for="(item,index) in goods" :key="index" class="padding-tb-xs" style="">
				<GoodsItem :options="item" />
			</uni-grid-item>
		</uni-grid>

		<!-- 慈善超市 -->
		<TitleNav title="慈善超市" @more="toExchange" />
		<ShopItem v-for="(item, index) in market" :key="index" :options="item" @timeup="timeup(index,$event)" />

		<!-- 相关报道 -->
		<TitleNav title="相关报道" :showMore="false" />
		<NewsBigItem v-for="(item, index) in writer" :key="index" :index="index" :options="item" />
		<view class="flex-row text-low text-sm" @click="goMessage"
			style=" margin: 20rpx auto 100rpx; justify-content: center;">
			<view style="" class="text-low">查看更多</view>
			<view class="iconfont icon-chakangengduo" style="line-height: 36rpx; font-size: 26rpx"></view>
		</view>

	</view>


	<!-- 接口请求加载动画 -->
	<loading></loading>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { getArticle } from '@/api/zixun/zixun';
	import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app"
	
	import { getExchangeProduct, getProductList, updateStatus } from '@/api/exchange/exchange';
	import { getRestTime } from '@/utils/time';
	import { getList } from '@/api/active/active';
	import { getProductByCategory } from '@/api/supermarket/supermarket';
	import NewsItem from './components/news-item/index.vue'
	import TitleNav from './components/title-nav/index.vue'
	import ActiveItem from './components/active-item/index.vue'
	import GoodsItem from './components/goods-item/index.vue'
	import ShopItem from './components/shop-item/index.vue'
	import NewsBigItem from './components/news-big-item/index.vue'
	
	// 导航栏
	const isLocation = ref(true)

	//活动
	const active = reactive({
		yg_list: [],
		fc_list: []
	})
	//慈善慈善
	const market = ref([])

	const writer = ref([])

	//请求义购之家参数
	const shop_params = reactive({
		current: 1,
		size: 6
	})

	//义购之家
	const goods = ref([])

	// 请求文章参数
	const article_param = reactive({
		categoryId: '1',
		current: 1,
		size: 6
	})

	//活动-请求参数
	const page = reactive({
		current: 1,
		size: 3,
		total: 0
	})
	
	const navList = ref([
		{
			icon: '/static/image/index/charity_active.png',
			name: '慈善活动',
			path: '/pages/active/active',
			isTab: true
		},
		// {
		// 	icon: '/static/image/index/buy_home.png',
		// 	name: '义购之家',
		// 	path: '/pages/supermarket/index',
		// 	isTab: true
		// },
		{
			icon: '/static/image/index/volunteer.png',
			name: '志愿队伍',
			path: '/pages/volunteer/index',
			isTab: false
		},
		{
			icon: '/static/image/index/charity_market.png',
			name: '慈善超市',
			path: '/pages/exchange/exchange',
			isTab: true
		},
		{
			icon: '/static/image/index/notice.png',
			name: '慈善公示',
			path: '/pages/notice/notice',
			isTab: false
		}
	])

	onLoad(() => {
		// 打开右上角分享服务
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
		// #endif
		//待上架商品
		get_waitProduct()
		//获取文章
		get_article()
		// 获取活动列表
		getactiveList()
		//义购之家
		get_Shop()
		// 获取定位授权
		// getLocation()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		//待上架商品
		get_waitProduct()
		//获取文章
		get_article()
		// 获取活动列表
		getactiveList()
		//义购之家
		get_Shop()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	// 获取定位授权
	const getLocation = () => {
		uni.authorize({
			scope: 'scope.userLocation',
			success: function (res) {
				uni.getFuzzyLocation({
					success: function (res) {
						// this.longitude = res.longitude
						// this.latitude = res.latitude
						isLocation.value = true
						console.log(res.longitude)
						console.log(res.latitude)
					}
				});
			}

		})
	}
	// 活动列表
	const getactiveList = () => {
		getList({ current: page.current, size: page.size }).then(res => {
			// 假设 activelist.value 和 res.data.data 是两个数组
			active.yg_list = [...res.data.data]
			page.total = Number(res.data.total)
		})
	}
	//待上架商品
	const get_waitProduct = () => {
		market.value = []
		getProductList().then((res : any) => {
			if (res.data.length == 0) {
				get_bottomShop(3)
			} else if (res.data.length < 3) {
				for (let i = 0; i < res.data.length; i++) {
					market.value.push(res.data[i])
					market.value[i].remark = getRestTime(market.value[i].releaseTime)
					if (market.value[i].remark.time <= 0) {
						timeup(i, market.value[i].id)
					}
				}
				const index = 3 - res.data.length
				get_bottomShop(index)

			} else {
				for (let i = 0; i < res.data.length; i++) {
					market.value.push(res.data[i])
					market.value[i].remark = getRestTime(market.value[i].releaseTime)
					if (market.value[i].remark.time <= 0) {
						timeup(i, market.value[i].id)
					}
				}
			}

		})
	}

	// 请求上架商品
	const get_bottomShop = (index : number) => {
		getExchangeProduct({
			current: 1,
			size: 3
		}).then((res : any) => {
			for (let i = 0; i < index; i++) {
				market.value.push(res.data.list[i])
			}
		})
	}


	//修改待上架商品状态
	const timeup = (index : any, productId : any) => {
		productId = parseInt(productId)
		market[index].remark.time = 0
		updateStatus({
			productId
		}).then((res : any) => {
			console.log('res' + res)
		})
	}

	//义购之家
	const get_Shop = () => {
		shop_params.current = 1
		getProductByCategory({
			current: 1,
			size: 6
		}).then(res => {
			goods.value = res.data.list
		})
	}

	//获取文章
	const get_article = () => {
		getArticle(article_param).then((res : any) => {
			writer.value = res.data.list
		})
	}
	// 工具栏点击
	const serveChange = (e : Object) => {
		const index = JSON.parse(JSON.stringify(e)).detail.index
		const {isTab,path} = navList.value[index]
		if(isTab) {
			uni.switchTab({
				url: path
			})
		}else {
			uni.navigateTo({
				url: path
			})
		}
	}

	// 活动预告-查看更多
	const getActiveMore = () => {
		uni.switchTab({
			url: '/pages/active/active'
		})
	}

	//跳转文章详情
	const toWriter_detail = (id) => {
		uni.navigateTo({
			url: '/pages/message/detail?id=' + id
		})
	}

	//跳转资讯
	const goMessage = () => {
		uni.navigateTo({
			url: '/pages/message/message'
		})
	}

	//义购之家
	const goShop = () => {
		uni.switchTab({
			url: '/pages/supermarket/index'
		})
	}

	//慈善超市
	const toExchange = () => {
		uni.switchTab({
			url: '/pages/exchange/exchange'
		})
	}

	
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.straightline {
		height: 26px;
		width: 0;
		border: 1px solid #EE3F4D;
	}
	.signUp {
		background-color: #EE3F4D;
		width: 54px;
		height: 18px;
		border-radius: 5px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
	}
</style>